<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <!-- 输入框 -->

        <div class="">
          <el-row class="row-bg" type="flex" justify="space-between">
            <el-col :span="21">
              <div class="grid-content bg-purple">
                <span class="keyword">关键字</span>
                <el-input
                  v-model.trim="form.keyword"
                  placeholder="根据编号搜索"
                  class="inputFont"
                ></el-input>
              </div>
            </el-col>
            <el-col :span="4">
              <div class="grid-content bg-purple end">
                <el-button @click="closeFn">清除</el-button>
                <el-button type="primary" @click="searchFn">搜索</el-button>
              </div>
            </el-col>
          </el-row>
        </div>
        <!-- 上方灰色的一条框 -->

        <div class="alldata">
          <!-- <svg></svg> -->
          <div>
            <!--  -->
            <p class="allCounts">
              <i class="el-icon-info"></i> 数据一共 {{ counts }} 条
            </p>
          </div>
        </div>

        <el-table :data="items" style="width: 100%">
          <el-table-column prop="id" label="编号" width="250">
          </el-table-column>
          <el-table-column label="题型" width="80">
            <template slot-scope="scope">
              <!-- {{ scope.row.questionType}} -->
              {{
                scope.row.questionType === "1"
                  ? "单选"
                  : scope.row.questionType === "2"
                  ? "多选"
                  : scope.row.questionType === "3"
                  ? "简答"
                  : ""
              }}
            </template>
          </el-table-column>
          <el-table-column label="题目编号" width="250">
            <template slot-scope="scope">
              <div
                class="acolor"
                v-for="(item, index) in scope.row.questionIDs"
                :key="index"
              >
              <!-- 弹出题目详情框 并把题目的 id 传过去 -->
                <a @click="topicDetails(item.id)" href="#">
                  {{ item.number }}</a
                >
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="addTime" label="录入时间" width="250">
          </el-table-column>
          <el-table-column prop="totalSeconds" label="答题时间(S)">
          </el-table-column>
          <el-table-column prop="accuracyRate" label="正确率(%)">
          </el-table-column>
          <el-table-column prop="userName" label="录入人"> </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <!-- 删除功能 -->
              <el-button
                type="danger"
                plain
                icon="el-icon-delete"
                circle
                @click="delFn(scope.row)"
              ></el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页功能 -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="form.page"
          :page-size="form.pagesize"
          :page-sizes="[20, 30, 50, 100]"
          :background="true"
          layout="->, prev, pager, next,sizes,jumper"
          :total="counts"
        >
        </el-pagination>

        <!-- 题目详情弹出层 -->
        <el-dialog
          title="题目预览"
          :visible.sync="dialogVisible"
          width="50%"
          :close-on-click-modal="false"
          :close-on-press-escape="false"
        >
          <questions-preview
            v-if="dialogVisible"
            :topic-id="topicId"
          ></questions-preview>
        </el-dialog>
      </el-card>
    </div>
  </div>
</template>

<script>
import QuestionsPreview from '../components/questions-preview'
import { randoms, removeRandoms } from '@/api/hmmm/questions'

export default {
  name: 'QuestionsRandoms',
  components: {
    QuestionsPreview
  },
  data () {
    return {
      form: {
        page: 1,
        pagesize: 20,
        keyword: null // 关键字
      },
      dialogVisible: false, // 题目详情的弹出层
      topicId: null, // 试题的 ID
      counts: null, // 总数
      items: [] // 题组列表数据

    }
  },
  created () {
    // 调用获取题组数据的方法
    this.randoms()
  },

  methods: {
    // 删除功能
    async delFn (data) {
      const resConfirm = await this.$confirm(
        '此操作将永久删除该题目件, 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).catch((err) => err)
      if (resConfirm === 'cancel') return this.$message('您取消了删除')
      // 调用删除的 api
      removeRandoms(data).then(() => {
        // 删除最后一条数据 会出现BUG
        if (this.items.length === 1) {
          this.form.page--
          if (this.form.page < 1) {
            this.form.page = 1
          }
        }
        // 给用户删除成功提示
        this.$message.success('删除成功')
        // 调用获取题组数据的方法
        this.randoms()
      }).catch(err => err)
    },

    // 获取题组数据
    randoms () {
      randoms(this.form).then((res) => {
        this.items = res.data.items
        this.counts = res.data.counts
      }).catch(err => err)
    },

    // 清除搜索
    closeFn () {
      // 清除 input 对话框的内容
      this.form.keyword = ''
      // 重新获取列表
      this.randoms()
    },

    // 点击搜索题目
    searchFn () {
      // 将页面从第一页开始
      this.form.page = 1
      // 重新获取列表
      this.randoms()
    },

    // 题目详情弹框
    topicDetails (id) {
      // 将题目 id 传给子组件
      this.topicId = id
      // 打开弹框
      this.dialogVisible = true
    },

    // 当前页发生改变触发的事件
    handleCurrentChange (newPage) {
      // 将新的页面赋值给 page
      this.form.page = newPage
      // 重新获取列表
      this.randoms()
    },

    // 每页条数发生改变触发的事件
    handleSizeChange (newPageSzie) {
      // 将新的每页条数赋值给 pagesize
      this.form.pagesize = newPageSzie
      // 重新获取列表
      this.randoms()
    }
  }
}
</script>

<style scoped lang='scss'>
el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}

.alldata {
  color: #909399;
  // text-align: center;

  height: 36px;
  width: 100%;
  margin-bottom: 15px;
}
.alldata .allCounts {
  line-height: 36px;
  font-size: 12px;
  padding-left: 40px;
  background-color: #f4f4f5;
}
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}

.el-col {
  border-radius: 4px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
  margin-left: 20px;
}
.row-bg {
  padding: 10px 0;
  // background-color: #f9fafc;
}
.inputFont.el-input.el-input--medium {
  width: 350px;
  padding-left: 15px;
}
.keyword {
  // margin-bottom: 15px;
  // padding-left: 30px;
  font-size: 14px;
  color: #000;
}
.end{
 position: relative;
 left: 40px;
 right: 0;
 margin: 0;
 padding: 0;
}
.acolor {
  color: rgb(0, 153, 255);
}
</style>
